<script src="../vue.min.js"></script>

<div class="box">
    <div class="tap">
        <div v-for="(item,index) in arr" :key="index" @mouseover="fn(index)">{{item}}</div>
    </div>
    <div>
        <div v-show="position==0"><a href="https://www.baidu.com/" @click.prevent>超链接</a></div>
        <div v-show="position==1">
            <div class="d a" @click="fnn(1)">1
                <div class="d b" @click.stop="fnn(2)">2
                    <div class="d c" @click.stop="fnn(3)">3</div>
                </div>
            </div>
        </div>
        <div v-show="position==2">3</div>
    </div>
</div>

<script>
    new Vue({
        el: '.box',
        data: {
            position: 0,
            arr: ['tap1', 'tap2', 'tap3']
        },
        methods: {
            fn(a) {
                this.position = a;
            },
            fnn(num) {
                console.log(num);
            }
        }
    })
</script>

<style>
    .tap {
        display: flex;
    }
    
    .tap div {
        margin-left: 10px;
        background: red;
    }
    
    .d {
        height: 100px;
        width: 100px;
    }
    
    .a {
        background: blue;
    }
    
    .b {
        background: green;
    }
    
    .c {
        background: yellow;
    }
</style>